import React, { Component } from 'react';
import { NavBar, Carousel, Flex } from 'antd-mobile';
import SearchInput from "../search/searchInput";
import "./category.css";
import myaxios from "../../utils/myaxios"

class category extends Component {
    state = {
        categories:[],  /* 返回的菜单数据 */
        categories_content:[], /* 右边菜单渲染的内容 */
        select_index:0   /* 左边菜单中当前选中的内容 */
    };

    handleItemClick = (e) => {
      //获取点击时选中的项
      let select_index = e.target.getAttribute("data-index");
      this.setState({
        select_index:select_index - 0,
        // select_index:parseInt(select_index), 或者这样写,因为如果不这样写,得到的就是一个字符串
        categories_content:this.state.categories[select_index].children
      })
    }


    handleProductItemClick = (e) => {
      let cid = e.target.getAttribute("data-index");
      console.log(cid)
      this.props.history.push("/goodlist/"+cid)
    }
    
    

    componentDidMount(){
        //https://www.linweiqin.cn/api/public/v1/categories
        myaxios.get("/categories").then(res=>{
            this.setState({
                categories:res,
                categories_content:res[0].children
            })
            /* console.log(res) */
        }).catch(err=>{
            console.log(err)
        })
    }

    render() {
        return (
            <div className="yg-category">
                {/* 首页导航条开始 */}
                <div className="yg-category-nav">
                    <NavBar className="category-nav">商品分类</NavBar>
                </div>
                {/* 首页导航条结束 */}

                {/* 首页搜索框开始 */}
                <div className="yg-category-search">
                     <SearchInput></SearchInput> 
                </div>
                {/* 首页搜索框结束 */}

                {/* 分类菜单开始 */}
                <div className="yg-category-content">

                    {/* 利用冒泡机制来处理点击事件 */}
                    <div className="content-left" onClick={this.handleItemClick}>
                        {
                           this.state.categories.map((v,index)=>{
                               return <div 
                                    data-index={index}
                                    className={
                                        this.state.select_index === index
                                        ? "active content-left-item" 
                                        :"content-left-item"} key={v.cat_id}>
                                   {v.cat_name}
                               </div>
                           })
                        }
                    </div>
                    <div className="content-right">
                        {
                            this.state.categories_content.map((v,i)=>{
                                return (
                                    <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单标题开始 */}
                                    
                                         <div className="right-item-title">
                                             {"/"}
                                             {v.cat_name}
                                             {"/"}
                                         </div>
                                    {/* 二级菜单标题结束 */}

                                    {/* 产品列表开始 */}
                                         <div className="product-list"  onClick={this.handleProductItemClick}>
                                             {
                                                 v.children&&v.children.map(v=>{
                                                     return <div 
                                                     key={v.cat_id}
                                                     className="product-list-item" >
                                                          <div className="imagerWrapper">
                                                              <img src={v.cat_icon} alt="" data-index={v.cat_id}/>
                                                          </div>
                                                          <div className="item-title">
                                                              {v.cat_name}
                                                          </div>
                                                     </div>
                                                 })
                                             }
                                         </div>
                                    </div> 
                                )
                                
                            })
                        }
                    </div>
                </div>
                {/* 分类菜单结束 */}
            </div>
        );
    }
}

export default category;
